<template >
    <div class="box">
      <span class="head">
        <AddClass @reback="queryClassData" ></AddClass>
        <DeleteClass :class-list="classList" @getSelectData="getSelectData" @reback="queryClassData"></DeleteClass>
      </span>
      <span class="head">
          <input class="form-control" :placeholder="$t('class.content')" v-model="formData.className">
          <button class="btn" @click="queryClassData" title="查询" ><el-icon><Search/></el-icon></button>
      </span>  
    </div>
    
    <el-config-provider :locale="locale">
          <el-table ref="classTableRef" :data="tableData" :height="height" stripe style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="cover" :label="$t('class.cover')" width="180" >
          <template v-slot="scope">
            <img :src="scope.row.cover"  class="buttonText">
          </template>
          </el-table-column>
          <el-table-column prop="className" :label="$t('class.className')" width="180" />
          <el-table-column prop="classNumber" :label="$t('class.classNumber')" />
          <el-table-column prop="teacher" :label="$t('class.teacher')" />
          <el-table-column prop="creatTime" :label="$t('class.creatTime')" />
          <el-table-column fixed="right" :label="$t('class.operate')" width="200">
          <template #default="scope">
            <EditClass @reback="queryClassData"></EditClass>
          <!-- <el-button title="增加" >
              <el-icon><Plus/></el-icon>
          </el-button> -->
          <el-button title="删除" @click="deleteClass(scope.row)">
              <el-icon><Delete/></el-icon>
          </el-button>
          </template>
          </el-table-column>
          </el-table>
          <nav class="tr">
          <el-pagination
              v-model:current-page="formData.page"
              v-model:page-size="formData.rp"
              :page-sizes="[10, 20, 50, 100]"
              layout="sizes, prev, pager, next,total"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
          </nav>
    </el-config-provider>
   
  </template>
  <script>
  import { EditPen,Plus,Delete,Search} from '@element-plus/icons-vue';
  import DeleteClass from '@/components/DeleteClass.vue';
  import AddClass from '@/components/AddClass.vue';
  import EditClass from '@/components/EditClass.vue';
   export default {
   name: '',
   components:{
      EditPen,
      Plus,
      Delete,
      Search,
      DeleteClass,
      AddClass,
      EditClass,
      
   },
   data: function(){
   return {
    total:10,
    height:400,
    formData:{
          page:1,
          rp:5,
          className:"",
          Private: null,
          cover: null,
          classprofile: "",
          allteacher: "",
        },
    tableData :[],
    classList:[],
   }
   },
   methods:{
      addClassData(){
          this.dialogVisible = true;
      },
    queryClassData(){
             var that = this;
             window.http.post('/api/Class/queryClassList',that.formData).then(res => {
                 var data = res.data;
                 that.tableData = data;
                 console.info("++++++++++++++++++++++++")
                 console.info(JSON.stringify(that.tableData))
             })
             .catch(function(error){
                 that.$message.error("服务器异常，失败")
             }); 
  
             window.http.post('/api/Class/queryClassTotal',that.formData).then(res => {
                 var data = res.data;
                 if(data.success){
                     that.total = data.total;
                window.sessionStorage.setItem('token2',data.total+1);
                 } 
             })
             .catch(function(error){
                 that.$message.error("服务器异常，111失败")
             });
         },
         handleSizeChange(){
             this.queryClassData();
         },
          handleCurrentChange(){
             this.queryClassData();
          } ,
        // editClass(){
           
        //   },
          getSelectData(){
          var array = this.$refs.classTableRef.getSelectionRows();
          this.classList = array;
       },
       deleteClass(row){
          this.classList.splice(0,this.classList.length);
          this.classList.push(row);
          this.$bus.emit("deleteClassById");
       },
   },
   
   mounted(){
      var app = document.getElementById("app");
      this.height= app.clientHeight-190;
      this.queryClassData();
  },
   }
  </script>
  <style scoped>
   .container {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   }
   .box{
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: justify;
    justify-content: space-between;
  
   }
   .head{
    display: flex;
    flex-direction: row;
   }
   .tr{
   width: 100%;
   flex-basis: 50px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   }
   .second{
   background-color: aqua;
   }
   .buttonText{
        width: 80px;
        height: 80px;
     }
  </style>